<template>
  <div class="box">
    <input placeholder="请输入账号" type="text" v-model="account" />
    <input
      class="pwd"
      placeholder="请输入密码"
      type="password"
      v-model="password"
    />
    <text :class="['tip', { showTip: !isOk }]">* 用户名或密码错误</text>
    <button class="login" @click="login">登录</button>
  </div>
</template>

<script lang="ts">
import { useAdminUser, useToken } from '../stores/app'
import { usePermissions, useRole } from '../stores/permission'
import { defineComponent, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { handleErrors, randomNo } from '../common/util'
import { storeToRefs } from 'pinia'
import axiosClient from '@/common/request'
import { apiLogin, apiRolePermissions } from '@/common/api'
import { URLS } from '@/common/urls'

export default defineComponent({
  setup() {
    const router = useRouter()
    const { setToken } = useToken()
    const { setAdminUser } = useAdminUser()
    const { setPermissions } = usePermissions()
    const roleStore = useRole()
    const { getRoleById } = storeToRefs(roleStore)
    const account = ref<string>('dahui')
    const password = ref<string>('123456')
    const isOk = ref<boolean>(false)

    watch(password, (newPwd, oldPwd) => {
      console.log('--new password--', newPwd, '--old pwd--', oldPwd)
      newPwd.length >= 6 ? (isOk.value = true) : (isOk.value = false)
    })

    async function login() {
      // 登录
      const responseData = await axiosClient.post(apiLogin(), {
        account: account.value,
        password: password.value,
      })
      const { data } = responseData?.data || ({} as any)
      const { adminUser, token } = data || ({} as any)

      if (!token) return

      isOk.value = true
      setAdminUser({
        id: adminUser ? adminUser.id : 0,
        name: adminUser ? adminUser.name : account.value,
        avatar: '#',
        phone: adminUser ? adminUser.phone : '',
        userNo: randomNo(),
        createdAt: adminUser ? adminUser.createdAt : 0,
      })
      setToken(token)
      roleStore.setRole({ id: adminUser.roleId, name: 'admin' })

      // 查询账户权限
      const rpData = await axiosClient
        .post(apiRolePermissions(), {
          page: 1,
          pageSize: 10,
          orderBy: 'id ASC',
          where: {
            adminRoleId: adminUser.roleId,
          },
        })
        .catch((err) => {
          handleErrors(err.response.status)
        })
      const { items } = rpData?.data || ({} as any)
      setPermissions(items)
      router.push(URLS.LIST)
    }

    return {
      account,
      password,
      login,
      isOk: true,
      getRoleById,
    }
  },
})
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 35px;
  border-radius: 2px;
}

.pwd {
  margin: 20px 0;
}

.tip {
  display: none;
  color: red;
  font-size: 12px;
  margin-bottom: 20px;
}

.showTip {
  display: block;
}

.loginBox {
  border: 5px solid orange;
  background: red;
  width: 200px;
  height: 100px;
}

.login {
  float: right; /**触发bfc*/
  width: 80px;
  height: 40px;
}
</style>
